// form表单设置autocomplete="off" ,阻止输入框下方历史填充
// register盒子设置隐藏 ,4个输入框后方添加 隐藏的span空标签

//获取2个盒子及a标签

let register = document.querySelector('.register')
let login = document.querySelector('.login')
let a1 = document.querySelector('.register a')
let a2 = document.querySelector('.login a')

//点击a链接 实现登录和注册盒子切换
a1.addEventListener('click', function () {
    register.style.display = 'none'
    login.style.display = 'block'
})
a2.addEventListener('click', function () {
    register.style.display = 'block'
    login.style.display = 'none'
})
//获取4个输入框
let input1 = document.querySelector('.register [name=username]')
let input2 = document.querySelector('.register [name=password]')
let input3 = document.querySelector('.login [name=username]')
let input4 = document.querySelector('.login [name=password]')

//调用4个输入框校验函数
verifyInput(input1, '用户名不能为空', /^[\S]{2,15}$/, '用户名必须为2~15位非空字符串')
verifyInput(input2, '密码不能为空', /^[\S]{6,15}$/, '密码必须为6~15位非空字符串')
verifyInput(input3, '用户名不能为空', /^[\S]{2,15}$/, '用户名必须为2~15位非空字符串')
verifyInput(input4, '密码不能为空', /^[\S]{6,15}$/, '密码必须为6~15位非空字符串')

//封装 校验函数
function verifyInput(ele, txt1, reg, txt2) {
    ele.addEventListener('input', function () {
        //判断非空,如果为空显示提示信息
        if (!this.value.trim()) {
            this.nextElementSibling.style.display = 'block'
            this.nextElementSibling.innerHTML = txt1
            return
        } else {
            this.nextElementSibling.style.display = 'none'
            this.nextElementSibling.innerHTML = ''
        }

        //校验正则,如果不通过则显示提示信息
        if (reg.test(this.value.trim())) {
            this.nextElementSibling.style.display = 'none'
            this.nextElementSibling.innerHTML = ''
        } else {
            this.nextElementSibling.style.display = 'block'
            this.nextElementSibling.innerHTML = txt2
        }
    })
}